<template>
  <div class="promotion-report-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>促销效果分析报表</h3>
          <div class="header-actions">
            <el-button type="primary" @click="refreshReport">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
            <el-button type="success" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
            <el-button type="warning" @click="showReportSettings">
              <el-icon><Setting /></el-icon>
              报表设置
            </el-button>
            <el-button type="info" @click="showReportHistory">
              <el-icon><Clock /></el-icon>
              历史报表
            </el-button>
          </div>
        </div>
      </template>

      <!-- 筛选条件 -->
      <div class="filter-area">
        <el-form :model="filterForm" inline>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="促销类型">
            <el-select v-model="filterForm.promotionType" placeholder="选择促销类型" clearable>
              <el-option label="满减活动" value="discount" />
              <el-option label="买赠活动" value="gift" />
              <el-option label="折扣活动" value="percentage" />
              <el-option label="积分活动" value="points" />
              <el-option label="会员专享" value="member" />
            </el-select>
          </el-form-item>
          <el-form-item label="促销活动">
            <el-select v-model="filterForm.promotionId" placeholder="选择具体活动" clearable>
              <el-option 
                v-for="promotion in promotions" 
                :key="promotion.id"
                :label="promotion.name"
                :value="promotion.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分析维度">
            <el-select v-model="filterForm.dimension" placeholder="选择分析维度">
              <el-option label="按时间分析" value="time" />
              <el-option label="按活动分析" value="promotion" />
              <el-option label="按客户分析" value="customer" />
              <el-option label="按商品分析" value="product" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="generateReport">生成报表</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 报表概览 -->
      <div class="report-overview">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon total-promotions">
                  <el-icon size="24"><Gift /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-value">{{ reportOverview.totalPromotions }}</div>
                  <div class="card-label">活动总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon total-usage">
                  <el-icon size="24"><TrendCharts /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-value">{{ reportOverview.totalUsage }}</div>
                  <div class="card-label">使用次数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon total-discount">
                  <el-icon size="24"><Money /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-value">¥{{ formatNumber(reportOverview.totalDiscount) }}</div>
                  <div class="card-label">总优惠金额</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="overview-card">
              <div class="card-content">
                <div class="card-icon avg-discount">
                  <el-icon size="24"><PieChart /></el-icon>
                </div>
                <div class="card-info">
                  <div class="card-value">¥{{ formatNumber(reportOverview.avgDiscount) }}</div>
                  <div class="card-label">平均优惠</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 报表内容 -->
      <div class="report-content">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <!-- 趋势分析 -->
          <el-tab-pane label="趋势分析" name="trend">
            <div class="trend-analysis">
              <div class="chart-container">
                <div class="chart-header">
                  <h4>促销使用趋势</h4>
                  <div class="chart-controls">
                    <el-radio-group v-model="trendChartType" size="small">
                      <el-radio-button label="line">折线图</el-radio-button>
                      <el-radio-button label="bar">柱状图</el-radio-button>
                      <el-radio-button label="area">面积图</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <div class="chart-placeholder">
                  <el-icon size="64"><TrendCharts /></el-icon>
                  <p>促销使用趋势图</p>
                </div>
              </div>
              
              <div class="trend-stats">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <span>使用次数统计</span>
                      </template>
                      <el-table :data="trendStats.usageStats" border size="small">
                        <el-table-column prop="date" label="日期" width="120" />
                        <el-table-column prop="usageCount" label="使用次数" width="100" />
                        <el-table-column prop="growthRate" label="增长率" width="100">
                          <template #default="{ row }">
                            <span :class="row.growthRate >= 0 ? 'growth-positive' : 'growth-negative'">
                              {{ row.growthRate >= 0 ? '+' : '' }}{{ row.growthRate }}%
                            </span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <span>优惠金额统计</span>
                      </template>
                      <el-table :data="trendStats.discountStats" border size="small">
                        <el-table-column prop="date" label="日期" width="120" />
                        <el-table-column prop="discountAmount" label="优惠金额" width="120">
                          <template #default="{ row }">¥{{ row.discountAmount.toFixed(2) }}</template>
                        </el-table-column>
                        <el-table-column prop="growthRate" label="增长率" width="100">
                          <template #default="{ row }">
                            <span :class="row.growthRate >= 0 ? 'growth-positive' : 'growth-negative'">
                              {{ row.growthRate >= 0 ? '+' : '' }}{{ row.growthRate }}%
                            </span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-tab-pane>

          <!-- 活动分析 -->
          <el-tab-pane label="活动分析" name="promotion">
            <div class="promotion-analysis">
              <div class="analysis-charts">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <span>活动使用分布</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><PieChart /></el-icon>
                        <p>活动使用分布饼图</p>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <span>活动效果对比</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><BarChart /></el-icon>
                        <p>活动效果对比柱状图</p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              
              <div class="promotion-details">
                <el-table :data="promotionAnalysis" border stripe>
                  <el-table-column prop="promotionName" label="活动名称" width="200" />
                  <el-table-column prop="type" label="活动类型" width="120">
                    <template #default="{ row }">
                      <el-tag :type="getTypeTagType(row.type)">{{ getTypeName(row.type) }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="usageCount" label="使用次数" width="100" />
                  <el-table-column prop="totalDiscount" label="总优惠金额" width="120">
                    <template #default="{ row }">¥{{ row.totalDiscount.toFixed(2) }}</template>
                  </el-table-column>
                  <el-table-column prop="avgDiscount" label="平均优惠" width="120">
                    <template #default="{ row }">¥{{ row.avgDiscount.toFixed(2) }}</template>
                  </el-table-column>
                  <el-table-column prop="conversionRate" label="转化率" width="100">
                    <template #default="{ row }">
                      <el-progress :percentage="row.conversionRate" :stroke-width="6" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="roi" label="ROI" width="100">
                    <template #default="{ row }">
                      <span :class="row.roi >= 0 ? 'roi-positive' : 'roi-negative'">
                        {{ row.roi >= 0 ? '+' : '' }}{{ row.roi.toFixed(1) }}%
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="150">
                    <template #default="{ row }">
                      <el-button type="primary" size="small" @click="viewPromotionDetail(row)">详情</el-button>
                      <el-button type="success" size="small" @click="exportPromotionData(row)">导出</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>

          <!-- 客户分析 -->
          <el-tab-pane label="客户分析" name="customer">
            <div class="customer-analysis">
              <div class="customer-overview">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-card>
                      <template #header>
                        <span>客户类型分布</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><PieChart /></el-icon>
                        <p>客户类型分布图</p>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card>
                      <template #header>
                        <span>会员等级分布</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><PieChart /></el-icon>
                        <p>会员等级分布图</p>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="8">
                    <el-card>
                      <template #header>
                        <span>客户消费分布</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><BarChart /></el-icon>
                        <p>客户消费分布图</p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              
              <div class="customer-details">
                <el-table :data="customerAnalysis" border stripe>
                  <el-table-column prop="customerType" label="客户类型" width="120" />
                  <el-table-column prop="memberLevel" label="会员等级" width="120" />
                  <el-table-column prop="customerCount" label="客户数量" width="100" />
                  <el-table-column prop="promotionUsage" label="促销使用次数" width="120" />
                  <el-table-column prop="totalDiscount" label="总优惠金额" width="120">
                    <template #default="{ row }">¥{{ row.totalDiscount.toFixed(2) }}</template>
                  </el-table-column>
                  <el-table-column prop="avgDiscount" label="人均优惠" width="120">
                    <template #default="{ row }">¥{{ row.avgDiscount.toFixed(2) }}</template>
                  </el-table-column>
                  <el-table-column prop="usageRate" label="使用率" width="100">
                    <template #default="{ row }">
                      <el-progress :percentage="row.usageRate" :stroke-width="6" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                      <el-button type="primary" size="small" @click="viewCustomerDetail(row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>

          <!-- 商品分析 -->
          <el-tab-pane label="商品分析" name="product">
            <div class="product-analysis">
              <div class="product-overview">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <span>商品分类促销效果</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><BarChart /></el-icon>
                        <p>商品分类促销效果图</p>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="12">
                    <el-card>
                      <template #header>
                        <span>热销商品促销</span>
                      </template>
                      <div class="chart-placeholder">
                        <el-icon size="48"><TrendCharts /></el-icon>
                        <p>热销商品促销图</p>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              
              <div class="product-details">
                <el-table :data="productAnalysis" border stripe>
                  <el-table-column prop="productName" label="商品名称" width="200" />
                  <el-table-column prop="category" label="商品分类" width="120" />
                  <el-table-column prop="promotionCount" label="参与促销次数" width="120" />
                  <el-table-column prop="salesIncrease" label="销量增长" width="100">
                    <template #default="{ row }">
                      <span :class="row.salesIncrease >= 0 ? 'growth-positive' : 'growth-negative'">
                        {{ row.salesIncrease >= 0 ? '+' : '' }}{{ row.salesIncrease }}%
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="revenueIncrease" label="收入增长" width="100">
                    <template #default="{ row }">
                      <span :class="row.revenueIncrease >= 0 ? 'growth-positive' : 'growth-negative'">
                        {{ row.revenueIncrease >= 0 ? '+' : '' }}{{ row.revenueIncrease }}%
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="discountAmount" label="优惠金额" width="120">
                    <template #default="{ row }">¥{{ row.discountAmount.toFixed(2) }}</template>
                  </el-table-column>
                  <el-table-column prop="effectiveness" label="促销效果" width="100">
                    <template #default="{ row }">
                      <el-rate v-model="row.effectiveness" disabled show-score />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                      <el-button type="primary" size="small" @click="viewProductDetail(row)">详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <!-- 报表设置对话框 -->
    <el-dialog
      v-model="settingsDialogVisible"
      title="报表设置"
      width="600px"
    >
      <el-form :model="reportSettings" label-width="120px">
        <el-form-item label="默认时间范围">
          <el-select v-model="reportSettings.defaultDateRange" style="width: 100%">
            <el-option label="最近7天" value="7days" />
            <el-option label="最近30天" value="30days" />
            <el-option label="最近90天" value="90days" />
            <el-option label="自定义" value="custom" />
          </el-select>
        </el-form-item>
        <el-form-item label="自动刷新">
          <el-switch v-model="reportSettings.autoRefresh" />
        </el-form-item>
        <el-form-item label="刷新间隔" v-if="reportSettings.autoRefresh">
          <el-input-number v-model="reportSettings.refreshInterval" :min="30" :max="3600" style="width: 200px" />
          <span class="form-tip">秒</span>
        </el-form-item>
        <el-form-item label="默认分析维度">
          <el-select v-model="reportSettings.defaultDimension" style="width: 100%">
            <el-option label="按时间分析" value="time" />
            <el-option label="按活动分析" value="promotion" />
            <el-option label="按客户分析" value="customer" />
            <el-option label="按商品分析" value="product" />
          </el-select>
        </el-form-item>
        <el-form-item label="图表类型">
          <el-radio-group v-model="reportSettings.chartType">
            <el-radio label="line">折线图</el-radio>
            <el-radio label="bar">柱状图</el-radio>
            <el-radio label="pie">饼图</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据精度">
          <el-input-number v-model="reportSettings.decimalPlaces" :min="0" :max="4" style="width: 200px" />
          <span class="form-tip">小数位数</span>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="settingsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveReportSettings">保存设置</el-button>
      </template>
    </el-dialog>

    <!-- 历史报表对话框 -->
    <el-dialog
      v-model="historyDialogVisible"
      title="历史报表"
      width="800px"
    >
      <div class="history-content">
        <div class="history-filters">
          <el-form inline>
            <el-form-item label="报表类型">
              <el-select v-model="historyFilter.type" placeholder="选择报表类型" clearable>
                <el-option label="趋势分析" value="trend" />
                <el-option label="活动分析" value="promotion" />
                <el-option label="客户分析" value="customer" />
                <el-option label="商品分析" value="product" />
              </el-select>
            </el-form-item>
            <el-form-item label="生成时间">
              <el-date-picker
                v-model="historyFilter.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadHistory">查询</el-button>
              <el-button @click="resetHistoryFilter">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <el-table :data="reportHistory" border stripe>
          <el-table-column prop="reportName" label="报表名称" width="200" />
          <el-table-column prop="type" label="报表类型" width="120" />
          <el-table-column prop="dateRange" label="数据范围" width="200" />
          <el-table-column prop="generateTime" label="生成时间" width="180" />
          <el-table-column prop="fileSize" label="文件大小" width="100" />
          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewHistoryReport(row)">查看</el-button>
              <el-button type="success" size="small" @click="downloadHistoryReport(row)">下载</el-button>
              <el-button type="danger" size="small" @click="deleteHistoryReport(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const loading = ref(false)
const activeTab = ref('trend')
const trendChartType = ref('line')
const settingsDialogVisible = ref(false)
const historyDialogVisible = ref(false)

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  promotionType: '',
  promotionId: '',
  dimension: 'time'
})

// 报表概览
const reportOverview = reactive({
  totalPromotions: 15,
  totalUsage: 1256,
  totalDiscount: 25680.50,
  avgDiscount: 20.45
})

// 促销活动列表
const promotions = ref([
  { id: 1, name: '满100减10' },
  { id: 2, name: '买二送一' },
  { id: 3, name: '会员专享9折' }
])

// 趋势统计数据
const trendStats = reactive({
  usageStats: [
    { date: '2024-01-09', usageCount: 45, growthRate: 12.5 },
    { date: '2024-01-10', usageCount: 52, growthRate: 15.6 },
    { date: '2024-01-11', usageCount: 48, growthRate: -7.7 },
    { date: '2024-01-12', usageCount: 61, growthRate: 27.1 },
    { date: '2024-01-13', usageCount: 58, growthRate: -4.9 },
    { date: '2024-01-14', usageCount: 67, growthRate: 15.5 },
    { date: '2024-01-15', usageCount: 72, growthRate: 7.5 }
  ],
  discountStats: [
    { date: '2024-01-09', discountAmount: 920.00, growthRate: 8.3 },
    { date: '2024-01-10', discountAmount: 1080.50, growthRate: 17.4 },
    { date: '2024-01-11', discountAmount: 980.25, growthRate: -9.3 },
    { date: '2024-01-12', discountAmount: 1250.75, growthRate: 27.6 },
    { date: '2024-01-13', discountAmount: 1180.00, growthRate: -5.7 },
    { date: '2024-01-14', discountAmount: 1350.25, growthRate: 14.4 },
    { date: '2024-01-15', discountAmount: 1440.50, growthRate: 6.7 }
  ]
})

// 活动分析数据
const promotionAnalysis = ref([
  {
    promotionName: '满100减10',
    type: 'discount',
    usageCount: 156,
    totalDiscount: 1560.00,
    avgDiscount: 10.00,
    conversionRate: 85,
    roi: 12.5
  },
  {
    promotionName: '买二送一',
    type: 'gift',
    usageCount: 89,
    totalDiscount: 2670.00,
    avgDiscount: 30.00,
    conversionRate: 78,
    roi: 8.3
  },
  {
    promotionName: '会员专享9折',
    type: 'member',
    usageCount: 234,
    totalDiscount: 4680.00,
    avgDiscount: 20.00,
    conversionRate: 92,
    roi: 15.7
  }
])

// 客户分析数据
const customerAnalysis = ref([
  {
    customerType: '普通客户',
    memberLevel: '-',
    customerCount: 156,
    promotionUsage: 89,
    totalDiscount: 890.00,
    avgDiscount: 5.71,
    usageRate: 57
  },
  {
    customerType: '会员客户',
    memberLevel: '普通会员',
    customerCount: 234,
    promotionUsage: 189,
    totalDiscount: 1890.00,
    avgDiscount: 8.08,
    usageRate: 81
  },
  {
    customerType: '会员客户',
    memberLevel: '金卡会员',
    customerCount: 89,
    promotionUsage: 87,
    totalDiscount: 1740.00,
    avgDiscount: 19.55,
    usageRate: 98
  }
])

// 商品分析数据
const productAnalysis = ref([
  {
    productName: 'iPhone 15',
    category: '电子产品',
    promotionCount: 12,
    salesIncrease: 25.6,
    revenueIncrease: 18.3,
    discountAmount: 1200.00,
    effectiveness: 4.5
  },
  {
    productName: '可口可乐',
    category: '食品饮料',
    promotionCount: 8,
    salesIncrease: 15.2,
    revenueIncrease: 12.8,
    discountAmount: 450.00,
    effectiveness: 3.8
  },
  {
    productName: '洗发水',
    category: '日用品',
    promotionCount: 6,
    salesIncrease: 8.7,
    revenueIncrease: 6.2,
    discountAmount: 320.00,
    effectiveness: 3.2
  }
])

// 报表设置
const reportSettings = reactive({
  defaultDateRange: '30days',
  autoRefresh: false,
  refreshInterval: 300,
  defaultDimension: 'time',
  chartType: 'line',
  decimalPlaces: 2
})

// 历史报表筛选
const historyFilter = reactive({
  type: '',
  dateRange: []
})

// 历史报表数据
const reportHistory = ref([
  {
    id: 1,
    reportName: '促销效果分析_20240115',
    type: 'trend',
    dateRange: '2024-01-01 至 2024-01-15',
    generateTime: '2024-01-15 15:30:00',
    fileSize: '2.3MB'
  },
  {
    id: 2,
    reportName: '活动分析报表_20240114',
    type: 'promotion',
    dateRange: '2024-01-01 至 2024-01-14',
    generateTime: '2024-01-14 16:00:00',
    fileSize: '1.8MB'
  }
])

// 方法
const formatNumber = (value) => {
  if (typeof value === 'number') {
    return value.toLocaleString()
  }
  return value
}

const getTypeTagType = (type) => {
  const typeMap = {
    'discount': 'success',
    'gift': 'warning',
    'percentage': 'primary',
    'points': 'info',
    'member': 'danger'
  }
  return typeMap[type] || 'info'
}

const getTypeName = (type) => {
  const typeMap = {
    'discount': '满减活动',
    'gift': '买赠活动',
    'percentage': '折扣活动',
    'points': '积分活动',
    'member': '会员专享'
  }
  return typeMap[type] || type
}

const handleTabChange = (tabName) => {
  activeTab.value = tabName
}

const generateReport = () => {
  loading.value = true
  ElMessage.info('正在生成报表...')
  
  // 模拟报表生成
  setTimeout(() => {
    loading.value = false
    ElMessage.success('报表生成完成')
  }, 2000)
}

const resetFilter = () => {
  Object.assign(filterForm, {
    dateRange: [],
    promotionType: '',
    promotionId: '',
    dimension: 'time'
  })
}

const refreshReport = () => {
  ElMessage.success('报表数据已刷新')
}

const exportReport = () => {
  ElMessage.success('报表导出成功')
}

const showReportSettings = () => {
  settingsDialogVisible.value = true
}

const saveReportSettings = () => {
  localStorage.setItem('reportSettings', JSON.stringify(reportSettings))
  ElMessage.success('报表设置已保存')
  settingsDialogVisible.value = false
}

const showReportHistory = () => {
  historyDialogVisible.value = true
}

const loadHistory = () => {
  ElMessage.success('历史报表数据已更新')
}

const resetHistoryFilter = () => {
  Object.assign(historyFilter, {
    type: '',
    dateRange: []
  })
}

const viewPromotionDetail = (row) => {
  ElMessage.info(`查看活动详情: ${row.promotionName}`)
}

const exportPromotionData = (row) => {
  ElMessage.success(`导出活动数据: ${row.promotionName}`)
}

const viewCustomerDetail = (row) => {
  ElMessage.info(`查看客户详情: ${row.customerType} - ${row.memberLevel}`)
}

const viewProductDetail = (row) => {
  ElMessage.info(`查看商品详情: ${row.productName}`)
}

const viewHistoryReport = (row) => {
  ElMessage.info(`查看历史报表: ${row.reportName}`)
}

const downloadHistoryReport = (row) => {
  ElMessage.success(`下载历史报表: ${row.reportName}`)
}

const deleteHistoryReport = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除报表"${row.reportName}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = reportHistory.value.findIndex(r => r.id === row.id)
    if (index > -1) {
      reportHistory.value.splice(index, 1)
      ElMessage.success('历史报表删除成功')
    }
  } catch {
    // 用户取消删除
  }
}

// 生命周期
onMounted(() => {
  // 加载保存的设置
  const savedSettings = localStorage.getItem('reportSettings')
  if (savedSettings) {
    Object.assign(reportSettings, JSON.parse(savedSettings))
  }
  
  // 设置默认时间范围
  const today = new Date()
  const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)
  filterForm.dateRange = [
    thirtyDaysAgo.toISOString().split('T')[0],
    today.toISOString().split('T')[0]
  ]
})
</script>

<style scoped>
.promotion-report-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-area {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

.report-overview {
  margin-bottom: 30px;
}

.overview-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  color: #fff;
}

.card-icon.total-promotions { background-color: #409eff; }
.card-icon.total-usage { background-color: #67c23a; }
.card-icon.total-discount { background-color: #e6a23c; }
.card-icon.avg-discount { background-color: #f56c6c; }

.card-info {
  display: flex;
  flex-direction: column;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.card-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.report-content {
  margin-top: 20px;
}

.trend-analysis,
.promotion-analysis,
.customer-analysis,
.product-analysis {
  padding: 20px 0;
}

.chart-container {
  margin-bottom: 30px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h4 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.chart-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px dashed #dcdfe6;
}

.chart-placeholder p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.trend-stats {
  margin-top: 20px;
}

.growth-positive {
  color: #67c23a;
  font-weight: 600;
}

.growth-negative {
  color: #f56c6c;
  font-weight: 600;
}

.roi-positive {
  color: #67c23a;
  font-weight: 600;
}

.roi-negative {
  color: #f56c6c;
  font-weight: 600;
}

.analysis-charts,
.customer-overview,
.product-overview {
  margin-bottom: 30px;
}

.promotion-details,
.customer-details,
.product-details {
  margin-top: 20px;
}

.history-content {
  padding: 20px 0;
}

.history-filters {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-area .el-form {
    flex-direction: column;
  }
  
  .filter-area .el-form-item {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .chart-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .chart-controls {
    justify-content: center;
  }
  
  .history-filters .el-form {
    flex-direction: column;
  }
  
  .history-filters .el-form-item {
    margin-right: 0;
    margin-bottom: 15px;
  }
}
</style>
